@import '../../app.scss';

page {
  padding: 0 20rpx;
}

.search-box {
  padding-top: 80rpx;
  margin-bottom: 50rpx;

  image {
    width: 36rpx;
    height: 30rpx;
    margin-right: 15rpx;
  }

  input {
    font-size: 30rpx;
    flex: 1;
    padding-left: 15rpx;
    border-left: 2rpx solid #898989;
  }
}

.items-box {
  box-shadow: 1px 1px 2px 0px rgba(24, 25, 25, 0.25);
  border-radius: 10px;

  .user-photo {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
  }

  .skill {
    background: rgba(240, 240, 240, 1);
    padding: 10rpx 20rpx;
    display: inline-block;
  }

  .label-text {
    border-radius: 3rpx;
    // background: map-get($map: $colors, $key: "blue");
  }

  .vip-box {
    position: relative;
    width: 30rpx;
    height: 30rpx;
    line-height: 30rpx;

    image {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    text {
      font-size: 16rpx;
      color: #fff;
      z-index: 2;
      position: absolute;
      top: 0;
      left: 15rpx;
      transform: translate(-50%);
    }
  }
}

.active {
  font-weight: bold;
  color: map-get($map: $colors, $key: "blue");
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgba($color: #000000, $alpha: 0.5);

  
}

.screen-box {
  width: 80%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  overflow: auto;
  z-index: 999;

  .screen-item {
    border-bottom: 1rpx solid #e3e3e3;

    .items {
      padding: 17rpx 35rpx;
      background: #F4F4F4;
      display: inline-block;
    }
  }

  .screen-items {
    .items {
      padding: 17rpx 35rpx;
      background: #F4F4F4;
      display: inline-block;
    }
  }

  .btn {
    background: map-get($map: $colors, $key: "blue");
    border-radius: 30rpx;
    width: 150rpx;
    height: 60rpx;
    margin: 50rpx auto;
    text-align: center;
    line-height: 60rpx;
  }
}
.isActive {
  background: #DAEDFF !important;
  color: #284A6C;
}